<template>
  <div style="padding-bottom: 10px">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item prop="keyWord">
        <el-input
            v-model="queryParams.keyWord"
            placeholder="关键词"
            clearable
            @keyup.enter.native="handleQuery"
            suffix-icon="search"
            :suffix-icon-click="handleQuery"
        />
      </el-form-item>
      <el-form-item prop="em1">
        <el-select v-model="queryParams.em1" placeholder="请选择" clearable style="width: 240px">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="em2">
        <el-select v-model="queryParams.em2" placeholder="请选择" clearable style="width: 240px">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="space-between" align="middle">
      <el-col :span="23">
        <el-table v-loading="loading" :data="matterList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="任务名称" align="center" prop="matterName"/>
          <el-table-column label="关联事项" align="center" prop="em1"/>
          <el-table-column label="任务接收人" align="center" prop="em3"/>
          <el-table-column label="任务关联人" align="center" prop="matterResponsible"/>
          <el-table-column label="要求完成时间" align="center" prop="em3"/>
          <el-table-column label="状态" align="center" prop="stat"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
                <el-button size="mini"  type="success" plain @click="claim(scope.row)">认领</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {reactive, toRefs, ref, onMounted} from 'vue';
import {listMatter} from "@/api/matter/matter";
import {ElInput, ElSelect, ElOption, ElRow, ElCol, ElForm, ElFormItem, ElButton, ElMessageBox} from 'element-plus';

export default {
  name: "taskReception",
  components: {
    ElInput,
    ElSelect,
    ElOption,
    ElRow,
    ElCol,
    ElForm,
    ElFormItem,
    ElButton,
    ElMessageBox,
  },
  setup(_, {emit}) {
    const data = reactive({
      loading: false,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      matterList: [],
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWord: null,
        em1: null,
        em2: null,
        em3: null,
        em4: null,
        em5: null,
      },
      options1: [
        {value: '', label: '全部'},
        {value: 'important', label: '重要工作'},
        {value: 'nonImportant', label: '非重要工作'},
      ],
      options2: [
        {value: '', label: '全部'},
        {value: 'important', label: '超期'},
        {value: 'nonImportant', label: '未超期'},
      ],
      form: {},
      rules: {
        matterResponsibleId: [
          {required: true, message: "事项负责人ID不能为空", trigger: "blur"},
        ],
      },
    });

    const getList = () => {
      data.loading = true;
      listMatter(data.queryParams).then((response) => {
        data.matterList = response.data.list;
        data.total = response.data.total;
        data.loading = false;
      });
    };

    const handleQuery = () => {
      data.queryParams.pageNum = 1;
      getList();
    };

    const resetQuery = () => {
      Object.assign(data.queryParams, {
        pageNum: 1,
        pageSize: 10,
        keyWord: null,
        em1: null,
        em2: null,
        em3: null,
        em4: null,
        em5: null,
      });
      handleQuery();
    };

    const handleSelectionChange = (selection) => {
      data.ids = selection.map((item) => item.matterId);
      data.single = selection.length !== 1;
      data.multiple = !selection.length;
    };

    const claim = (row) => {
      console.log("认领", row);
    };


    onMounted(() => {
      getList();
    });

    return {
      ...toRefs(data),
      getList,
      handleQuery,
      resetQuery,
      handleSelectionChange,
      claim
    };
  },
};
</script>

<style>
</style>
